<template>
  <div class="EWSMain">
    <!-- <div class="name_aside">预警统计</div> -->
     <div class="leftTitle">
        预警统计
      </div>
    <el-form :inline="true" :model="formInEWS" class="demo-form-inline">
      <el-form-item label="村庄名称:">
        <el-input v-model="formInEWS.village" placeholder="" />
      </el-form-item>
      <el-form-item label="生成时间:">
        <el-date-picker
          v-model="formInEWS.Time"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          @change="TimeChange"
        />
      </el-form-item>
      <el-form-item label="预警类型">
        <el-select v-model="formInEWS.iWarningStep" placeholder="预警类型">
          <el-option label="全部" value="-1" />
          <el-option label="风险预警6h" value="31" />
          <el-option label="风险预警12h" value="32" />
          <el-option label="风险预警24h" value="33" />
          <el-option label="预报预警" value="2" />
          <el-option label="监测预警" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="预警等级">
        <el-select v-model="formInEWS.iLvl" placeholder="预警等级">
          <el-option label="全部" value="-1" />
          <el-option label="极危险" value="1" />
          <el-option label="危险" value="2" />
          <el-option label="警戒" value="3" />
          <el-option label="关注" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="处置状态">
        <el-select v-model="formInEWS.isDeal" placeholder="处置状态">
          <el-option label="全部" value="-1" />
          <el-option label="未处置" value="0" />
          <el-option label="已处置" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="chartListBox">
      <div class="chartList">
        <div class="name_aside RightCardTitle">风险预警统计: {{ FengXianTotal }}个</div>
        <div class="chartBox firstChartBox">
          <div id="FengXianChart" class="chartMain" />
        </div>
      </div>
      <div class="chartList">
        <div class="name_aside RightCardTitle">预报预警统计: {{ YuBaoTotal }}个</div>
        <div class="chartBox">
          <div id="YuBaoChart" class="chartMain" />
        </div>
      </div>
      <div class="chartList">
        <div class="name_aside RightCardTitle">监测预警统计: {{ JianCeTotal }}个</div>
        <div class="chartBox">
          <div id="JianCeChart" class="chartMain" />
        </div>
      </div>
    </div>
    <div class="tableBox">
      <div class="zhouDataTable listTables">
        <el-table
          v-loading="loading"
          :data="StatisticsList.data"
          class="flagTable rainLimitTable"
          style="width: 100%"
        >
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              {{ (Pageipage - 1)*[Pageirows]+scope.$index+1 }}
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="wsnm" label="所属小流域" /> -->
          <el-table-column align="center" prop="country" label="预警类别">
            <template slot-scope="scope">
              <span v-show="scope.row.sType == '1'">监测预警</span>
              <span v-show="scope.row.sType == '2'">预报预警</span>
              <span v-show="scope.row.sType == '3'">风险预警</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="country" label="所属乡镇" />
          <el-table-column align="center" prop="ewcode" label="村庄/河道编码" />
          <el-table-column align="center" prop="lvl" label="预警等级">
            <template slot-scope="scope">
              <template v-if="scope.row.sType == '3'">
                <span v-show="scope.row.wLevel == '1'" class="levelSpanList levelSpan1">可能性很大</span>
                <span v-show="scope.row.wLevel == '2'" class="levelSpanList levelSpan2">可能性较大</span>
                <span v-show="scope.row.wLevel == '3'" class="levelSpanList levelSpan3">可能性大</span>
                <span v-show="scope.row.wLevel == '4'" class="levelSpanList levelSpan4">可能发生</span>
              </template>
              <template v-else>
                <span v-show="scope.row.wLevel == '1'" class="levelSpanList levelSpan1">极危险</span>
                <span v-show="scope.row.wLevel == '2'" class="levelSpanList levelSpan2">危险</span>
                <span v-show="scope.row.wLevel == '3'" class="levelSpanList levelSpan3">警戒</span>
                <span v-show="scope.row.wLevel == '4'" class="levelSpanList levelSpan4">关注</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="风险/预警依据" width="250">
            <template slot-scope="scope">
              <template v-if="scope.row.sType == '3'">
                <span>
                  {{ scope.row.step }}小时预报降雨超过<span v-show="scope.row.wLevel == '1'">可能性很大</span><span
                    v-show="scope.row.wLevel == '2'"
                  >可能性较大</span>
                  <span v-show="scope.row.wLevel == '3'">可能性大</span><span
                    v-show="scope.row.wLevel == '4'"
                  >可能发生</span>指标
                </span>
              </template>
              <template v-else-if="scope.row.sType == '2'">
                <span>
                  {{ scope.row.sCode }}洪峰流量{{ scope.row.wData }}m³/s，超<span
                    v-show="scope.row.wLevel == '1'"
                  >极危险</span><span
                    v-show="scope.row.wLevel == '2'"
                  >危险</span><span
                    v-show="scope.row.wLevel == '3'"
                  >警戒</span><span
                    v-show="scope.row.wLevel == '4'"
                  >关注</span>（预警阈值：{{ scope.row.v }}m³/s）
                </span>
              </template>
              <template v-else>
                <span>
                  {{ scope.row.stnm }}{{ scope.row.step }}小时降雨达到{{ scope.row.wData }}mm，超<span
                    v-show="scope.row.wLevel == '1'"
                  >极危险</span><span
                    v-show="scope.row.wLevel == '2'"
                  >危险</span><span
                    v-show="scope.row.wLevel == '3'"
                  >警戒</span><span
                    v-show="scope.row.wLevel == '4'"
                  >关注</span>（预警阈值：{{ scope.row.v }}mm）
                </span>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="ftm" label="生成时间">
            <template slot-scope="scope">
              {{ $moment(scope.row.ftm).format("YYYY-MM-DD HH:mm") }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="disposeState" label="处置状态">
            <template slot-scope="scope">
              <span v-show="scope.row.disposeState == '00'">未处置</span>
              <span v-show="scope.row.disposeState == '10'">已处置</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="处置人" />
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini">
                处置
              </el-button>
              <el-button type="primary" size="mini" @click="onClickShowDetail(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-wrap">
          <el-pagination
            background
            :page-sizes="pageInfo.sizeList"
            :current-page="Pageipage"
            :page-size="Pageirows"
            :total="StatisticsList.dataCount"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <Dlgdiv v-if="this.$store.getters.dlgShow" mask style="width: 80%;height: 60%;left: 10%;top: 20%;">
      <template v-slot:title>
        预警信息详情
      </template>
      <template v-slot:body>
        <EarlyWarningInfoDetails />
      </template>
    </Dlgdiv>
  </div>
</template>

<script>
import MixinPage from '@/views/components/MixinPage'
import {
    GetAllWarningStatistics,
    GetWarningStatisticsList
} from '@/api/zyx.js'
import EarlyWarningInfoDetails from './EarlyWarningInfoDetails.vue'
import {
    mapGetters
} from 'vuex'
export default {
    components: {
        EarlyWarningInfoDetails
    },
    mixins: [MixinPage],
    data() {
        return {
            loading: false,
            FengXianTotal: '',
            JianCeTotal: '',
            YuBaoTotal: '',
            formInEWS: {
                village: '',
                Time: [this.$moment().subtract(1, 'day').format('YYYY-MM-DD 08:00'), this.$moment().format(
                    'YYYY-MM-DD HH:mm')],
                BeginTime: this.$moment().subtract(1, 'day').format('YYYY-MM-DD 08:00'),
                EndTime: this.$moment().format('YYYY-MM-DD HH:mm'),
                iWarningStep: '-1',
                iLvl: '-1',
                isDeal: '-1'
            },
            WSWSCD: '',
            StatisticsList: [],
            Pageipage: 1,
            Pageirows: 10
        }
    },
    computed: {
        ...mapGetters({
            basin: 'basin'
        })
    },
    watch: {
        'basin': {
            immediate: true,
            deep: true,
            handler(val) {
                this.WSWSCD = val
                this.$nextTick(() => {
                    this.GetData()
                })
            }
        }
    },
    mounted() {
    },

    methods: {
        onSubmit() {
            this.GetData()
        },
        TimeChange(val) {
            if (val) {
                this.formInEWS.BeginTime = val[0]
                this.formInEWS.EndTime = val[1]
                this.formInEWS.Time = val
            } else {
                this.formInEWS.BeginTime = ''
                this.formInEWS.EndTime = ''
            }
        },
        onClickShowDetail(data) {
            const dlgParams = this.$store.getters.dlgParams
            dlgParams.name = 'EarlyWarningInfoDetails'
            dlgParams.params = data
            this.$store.dispatch('dlgParams', dlgParams)
            this.$store.dispatch('dlgShow', true)
        },
        /** 显示条数*/
        handleSizeChange(val) {
            this.Pageirows = val
            this.GetData('list')
        },
        /** 翻页*/
        handleCurrentChange(val) {
            this.Pageipage = val
            this.GetData('list')
        },
        GetData(type) {
            this.loading = true
            const params = {
                wswscd: this.WSWSCD,
                dtBegin: this.formInEWS.BeginTime,
                dtEnd: this.formInEWS.EndTime,
                strAdcd: this.formInEWS.village,
                iWarningStep: this.formInEWS.iWarningStep,
                iLvl: this.formInEWS.iLvl,
                isDeal: this.formInEWS.isDeal,
                page: this.Pageipage,
                limit: this.Pageirows
            }

            GetWarningStatisticsList(params).then((res) => {
                if (res.isSuccess) {
                    this.loading = false
                    this.StatisticsList = res
                }
            })
            GetAllWarningStatistics(params).then((res) => {
                const FengXianList = []
                const JianCeList = []
                const YuBaoList = []
                if (res.isSuccess) {
                    this.loading = false
                    this.FengXianTotal = res.data.FengXian.Total
                    this.JianCeTotal = res.data.JianCe.Total
                    this.YuBaoTotal = res.data.YuBao.Total
                    res.data.FengXian.Deail.forEach(function(item, index) {
                        FengXianList.push({
                            value: item.Count,
                            name: item.Txt
                        })
                    })
                    this.getPieEchart(FengXianList, 'FengXianChart')
                    res.data.JianCe.Deail.forEach(function(item, index) {
                        JianCeList.push({
                            value: item.Count,
                            name: item.Txt
                        })
                    })
                    this.getPieEchart(JianCeList, 'JianCeChart')
                    res.data.YuBao.Deail.forEach(function(item, index) {
                        YuBaoList.push({
                            value: item.Count,
                            name: item.Txt
                        })
                    })
                    this.getPieEchart(YuBaoList, 'YuBaoChart')
                }
            })
        },
        getPieEchart(dataList, chartId) {
            const colorList = ['#CE1F1F', '#F0810B', '#F0C90B', '#00A2FB']
            // 饼图
            const option = {
                title: {
                    // 设置饼图标题，位置设为顶部居中
                    text: ''
                },
                color: colorList,
                series: [{
                    type: 'pie',
                    radius: ['30%', '60%'], // 饼图半径
                    center: ['50%', '50%'],
                    roseType: 'area',
                    label: {
                        show: true,
                        color: '',
                        formatter: '{c}个 \n {b}' // b代表名称，c代表对应值，d代表百分比
                    },
                    data: dataList.map((item, index) => {
                        item.label = {
                            color: colorList[index]
                        }
                        return item
                    })
                }]
            }
            this.myChart = this.$echarts.init(document.getElementById(chartId))
            this.myChart.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
	.zhouDataTable {
		height: 100%;
	}

	.rainLimitTable {
		height: calc(~"100% - 50px");
	}

	/deep/.frameCenter {
		padding: 0!important;
	}
 
	.EWSMain {
		width: 100%;
		height: 100vh;
		// margin: 10px;
		padding: 20px;
		box-sizing: border-box;
		position: relative;
		z-index: 3;
		// background: linear-gradient(90deg, #122D44 0%, #204463 51%, rgba(18, 45, 68, 0.49) 100%);
		// background: #122D44;
		padding-top:90px;
		position: absolute;
		top: 0;
		left:0;

		.name_aside {
			font-weight: bold;
			font-size: 16px;
			// line-height: 24px;
		}

		.chartListBox {
			display: -webkit-flex;
			display: flex;
			width: 100%;
			height: 300px;
			margin-bottom: 20px;

			.chartList {
				width: 100%;
				height: 100%;

				.chartBox {
					width: 100%;
					height: calc(100% - 40px);
					border-left: 1px solid #1D1899;

					.chartMain {
						width: 100%;
						height: 100%;
						background: url("~@/assets/newimg/chartBg.png") no-repeat center,
							url("~@/assets/newimg/chartBg1.png") no-repeat center;
						background-size: auto 100%, auto 49%;
					}
				}

				.firstChartBox {
					border-left: none;
				}
			}
		}

		.tableBox {
			height: calc(~"100% - 370px");

			.levelSpanList {
				display: inline-block;
				padding: 5px 8px;
				border-radius: 2px;

			}

			.levelSpan1 {
				color: #CE1F1F;
				background: rgba(206, 31, 31, 0.2);
			}

			.levelSpan2 {
				color: #F0810B;
				background: rgba(240, 129, 11, 0.2);
			}

			.levelSpan3 {
				color: #F0C90B;
				background: rgba(240, 201, 11, 0.2);
			}

			.levelSpan4 {
				color: #00A2FB;
				background: rgba(0, 162, 251, .2);
			}
		}
	}
 .isShowtopflg{
   .EWSMain{
    padding-top: 70px;
  }
  .leftTitle {
    position: absolute;
    top: 25px;
  }
 }
	/deep/ .el-input {
		width: 140px;
  }
 // #aec0db
 .el-select-dropdown{
  .el-select-dropdown__item{
  font-size:0.8125px;
  color:#aec0db;
 }
}
.leftTitle {
    width:19%;
   
    font-size: 20px;
    padding: 5px 0;
    text-shadow: 2px 3px 1px  rgba(0,0,0,0.5);
    background: url("~@/assets/newimg/mainINdexBg.png") no-repeat left center;
    background-size: 100% 100%;
    text-indent: 35px;
}
</style>




